<template>
  <div class="MemberBody">
    <van-sticky>
      <van-nav-bar title="健康vip会员" />
    </van-sticky>
    <div class="MemberHeader">
      <img src="../../img/MemberHeaderImg.png" alt="" />
    </div>
    <div class="MemberMain">
      <img src="../../img/MemberMainImg1.png" alt="" />
      <img src="../../img/MemberMainImg2.png" alt="" />
      <img src="../../img/MemberMainImg3.png" alt="" />
      <img src="../../img/MemberMainImg4.png" alt="" />
      <img src="../../img/MemberMainImg5.png" alt="" />
    </div>
    <van-sticky :offset-bottom="0.5" position="bottom">
      <van-button class="Membership" @click="payment">
        ￥29 开通会员
      </van-button>
    </van-sticky>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { showToast } from "vant";
import instance from "../axios/index";
import { showConfirmDialog } from "vant";
// const token = localStorage.getItem("token");
const payment = () => {
  showConfirmDialog({
    title: "会员充值",
    message: "您是否确定支付29元,开通会员,享受更多权益?",
  })
    .then(() => {
      let data = {
        id: Math.random().toString(36).substr(2),
        price: 29,
      };
      instance.get("/api/pay", { params: data }).then((res) => {
        window.open(res.data.data);
      });
      setTimeout(() => {
        showToast("支付成功");
      }, 60000);
    })
    .catch(() => {
      showToast("您已取消支付");
    });
};
</script>

<style scoped>
.MemberBody {
  width: 100%;
  height: 100%;
  position: relative;
}
.MemberHeader {
  width: 100%;
  background-color: #010101;
}
.MemberHeader img {
  width: 100%;
  height: 100%;
}
.Membership {
  width: 100%;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  background-color: #e5b87f;
  position: absolute;
  bottom: 0.5rem;
}
.MemberMain {
  width: 100%;
  background-color: #010101;
}
.MemberMain img {
  width: 100%;
  height: 100%;
}
</style>
